<template>
    <!-- vue3里面已经支持写多个根标签了 -->
    <div>
        {{ obj.name }} -- {{ obj.age }}
    </div>
    <div>
        <button @click="button">（ex6）点击我</button>
    </div>
</template>

<script>
/**
 * 深层响应式数据定义：reactive
 *  reactive()  是一个函数，接收一个对象，返回一个响应式对象
 *  使用方法：
 *  const state = reactive({
 *      count: 0
 *  });
 */
import { reactive } from 'vue';
import { ref } from 'vue';
export default {
    setup(){
        // //使用ref实现响应式数据  但是获取对象的时候，需要先.value出所有数据  不方便。对象所以使用reactive
        // const obj = ref({
        //     name:'蛋蛋',
        //     age:18
        // })
        // //创建方法
        // const button = () =>{
        //     //此时因为ref定义的响应式数据，需要先.value出所有数据，在.age
        //     obj.value.age +=1;
        // }

        //使用reactive实现响应式数据 reactive返回的是一个代理对象。复杂数据全部使用Proxy代理
        const obj = reactive({
            name:'蛋蛋',
            age:18
        })
        const button = () =>{
            //此时因为ref定义的响应式数据，不需要.value 所以reactive生成的响应式对象 可以直接访问属性，。
            obj.age +=1;
        }
        return {
            obj,
            button
        }

    },
}
</script>
  
<style lang="">
    
</style>